<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>健身房开店系统</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/theme-chalk/index.min.css">
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/index.min.js"></script>
    <style>
        .container { padding: 20px; }
        .status { float: right; margin-right: 20px; }
        .steps { margin: 20px 0; }
        .form-panel { 
          margin: 40px auto; /* 修改为自动居中 */
          max-width: 800px; /* 添加最大宽度限制 */
        }
        .action-btns { 
            margin-top: 30px; 
            display: flex;
            justify-content: center;
            gap: 10px;
        }
		.welcome-page {
		    text-align: center;
		}
		.welcome-page h2 {
		    margin-bottom: 20px;
		}
		.el-form-item__content {
		  width: 50%;
		  margin: 0 auto !important;
		}
		.el-input, .el-select, .el-date-editor, .el-textarea__inner {
		  width: 100% !important;
		}
        .success-detail {
            margin: 20px 0;
            color: #606266;
        }

        .info-card {
            margin: 20px auto;
            max-width: 500px;
            background: #f8f9fa;
            border-radius: 8px;
        }

        .card-content {
            padding: 15px;
        }

        .success-item {
            display: flex;
            align-items: center;
            margin: 12px 0;
            font-size: 15px;
        }

        .success-item i {
            color: #67C23A;
            font-size: 18px;
            margin-right: 10px;
            width: 25px;
        }

        .action-btns .el-button {
            padding: 12px 25px;
            border-radius: 20px;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <!-- 状态显示 -->
            <div class="status">
                <el-tag :type="statusType">{{statusText}}</el-tag>
            </div>

            <!-- 流程步骤 -->
            <el-steps :active="currentStep" finish-status="success" class="steps">
                <el-step title="进入页面"></el-step>
                <el-step title="店主信息"></el-step>
                <el-step title="店面信息"></el-step>
                <el-step title="场馆信息"></el-step>
                <el-step title="卡信息"></el-step>
                <el-step title="老师信息"></el-step>
                <el-step title="完成"></el-step>
            </el-steps>

            <!-- 内容区域 -->
            <div class="form-panel">
                <!-- 步骤1：进入页面 -->
                <div class="welcome-page" v-if="currentStep === 0">
                 <h2>欢迎使用健身房开店系统</h2>
                 <el-button type="primary" @click="startProcess">一键开店</el-button>
                </div>

                <!-- 步骤2：店主信息 -->
                <div v-if="currentStep === 1">
                    <el-form label-width="120px">
                        <el-form-item label="用户类型">
                            <el-select v-model="formData.owner.type" placeholder="请选择">
                                <el-option label="店主" value="owner"></el-option>
                                <el-option label="老师" value="teacher"></el-option>
                                <el-option label="学生" value="student"></el-option>
                            </el-select>
                        </el-form-item>
                
                        <el-form-item label="密码">
                            <el-input 
                                v-model="formData.owner.password" 
                                type="password" 
                                show-password>
                            </el-input>
                        </el-form-item>
                
                        <el-form-item label="昵称">
                            <el-input v-model="formData.owner.nickname"></el-input>
                        </el-form-item>
                
                        <el-form-item label="真实姓名">
                            <el-input v-model="formData.owner.realname"></el-input>
                        </el-form-item>
                
                        <el-form-item label="电子邮箱">
                            <el-input v-model="formData.owner.email" type="email"></el-input>
                        </el-form-item>
                
                        <el-form-item label="联系方式">
                            <el-input v-model="formData.owner.phone"></el-input>
                        </el-form-item>
                
                        <el-form-item label="身份证号">
                            <el-input v-model="formData.owner.idNumber"></el-input>
                        </el-form-item>
                
                        <el-form-item label="年龄">
                            <el-input 
                                v-model.number="formData.owner.age" 
                                type="number"
                                min="18"
                                max="100">
                            </el-input>
                        </el-form-item>
                
                        <el-form-item label="性别">
                            <el-radio-group v-model="formData.owner.gender">
                                <el-radio label="male">男</el-radio>
                                <el-radio label="female">女</el-radio>
                                <el-radio label="other">其他</el-radio>
                            </el-radio-group>
                        </el-form-item>
                
                        <el-form-item label="生日">
                            <el-date-picker
                                v-model="formData.owner.birthday"
                                type="date"
                                placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                
                        <el-form-item label="标签">
                            <el-select 
                                v-model="formData.owner.tags" 
                                multiple
                                placeholder="请选择标签">
                                <el-option 
                                    v-for="item in ['健身达人','营养师','运动员','教练资格']"
                                    :key="item"
                                    :label="item"
                                    :value="item">
                                </el-option>
                            </el-select>
                        </el-form-item>
                
                        <el-form-item label="工作经历">
                            <el-input 
                                type="textarea"
                                :rows="3"
                                v-model="formData.owner.experience">
                            </el-input>
                        </el-form-item>
                
                        <el-form-item label="擅长领域">
                            <el-input 
                                type="textarea"
                                :rows="2"
                                v-model="formData.owner.expertise">
                            </el-input>
                        </el-form-item>
                
                        <el-form-item label="工作时间（年）">
                            <el-input 
                                v-model.number="formData.owner.workTime"
                                type="number"
                                min="0"
                                placeholder="请输入工作年限"        style="width: 200px">
                                <template slot="append">年</template>
                            </el-input>
                        </el-form-item>
                    </el-form>
                </div>

                <!-- 步骤3：店面信息 -->
                <div v-if="currentStep === 2">
                    <el-form label-width="120px">
                        <el-form-item label="店面名称">
                                   <el-input v-model="formData.shop.name"></el-input>
                               </el-form-item>
                               <el-form-item label="店面编号">
                                   <el-input v-model="formData.shop.no"></el-input>
                               </el-form-item>
                               <el-form-item label="店面地址">
                                   <el-input v-model="formData.shop.address"></el-input>
                               </el-form-item>
                               <el-form-item label="最大人数">
                                   <el-input 
                                       v-model.number="formData.shop.limit" 
                                       type="number"
                                       placeholder="请输入数字"
                                       min="0">
                                   </el-input>
                               </el-form-item>
                    </el-form>
                </div>

                <!-- 步骤4：场馆信息 -->
                <div v-if="currentStep === 3">
                    <el-form label-width="120px">
                        <el-form-item label="场馆名称">
                            <el-input v-model="formData.space.name"></el-input>
                        </el-form-item>
                        <el-form-item label="场主ID">
                            <el-input v-model="formData.space.ownerId"></el-input>
                        </el-form-item>
                        <el-form-item label="场主姓名">
                            <el-input v-model="formData.space.ownerName"></el-input>
                        </el-form-item>
                        <el-form-item label="详细地址">
                            <el-input v-model="formData.space.address"></el-input>
                        </el-form-item>
                        <el-form-item label="联系方式">
                            <el-input v-model="formData.space.contact"></el-input>
                        </el-form-item>
                        <el-form-item label="场馆图片">
                            <el-upload
                                action="/upload"
                                list-type="picture-card"
                                :on-success="handleUploadSuccess"
                                :on-remove="handleRemove">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                        </el-form-item>
                    </el-form>
                </div>


                <!-- 步骤5：卡信息 -->
                <div v-if="currentStep === 4">
                    <el-form label-width="120px">
                        <el-form-item label="会员卡列表">
                            <el-select
                                    v-model="selectedCard"
                                    placeholder="请选择会员卡"
                                    filterable
                                    @change="handleCardSelect">
                                <el-option
                                        v-for="item in cardList"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                            <el-button type="text" @click="cardDialogVisible = true">+ 新增会员卡</el-button>
                        </el-form-item>
                    </el-form>

                    <!-- 新增卡弹窗 -->
                    <el-dialog
                            title="新增会员卡"
                            :visible.sync="cardDialogVisible"
                            width="600px">
                        <el-form ref="cardForm" :model="newCard" label-width="100px">
                            <el-form-item label="卡名称" prop="name" required>
                                <el-input v-model="newCard.name"></el-input>
                            </el-form-item>

                            <!-- 原卡信息表单内容转移到这里 -->
                            <el-form-item label="有效期" required>
                                <el-date-picker
                                        v-model="newCard.validDate"
                                        type="daterange"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期">
                                </el-date-picker>
                            </el-form-item>

                            <el-form-item label="价格" required>
                                <el-input
                                        v-model.number="newCard.originalPrice"
                                        type="number"
                                        min="0"
                                        placeholder="原价"        style="width: 200px; margin-right: 15px">
                                    <template slot="append">元</template>
                                </el-input>
                                <el-input
                                        v-model.number="newCard.sellingPrice"
                                        type="number"
                                        min="0"
                                        placeholder="售价"        style="width: 200px">
                                    <template slot="append">元</template>
                                </el-input>
                            </el-form-item>

                            <el-form-item label="使用次数">
                                <el-input-number v-model="newCard.usageLimit" :min="0"></el-input-number>
                            </el-form-item>

                            <el-form-item label="背景图">
                                <el-upload
                                        action="/upload"
                                        list-type="picture-card"
                                        :limit="1"
                                        :on-success="handleCardUpload"
                                        :on-remove="handleCardRemove">
                                    <i class="el-icon-plus"></i>
                                </el-upload>
                            </el-form-item>

                            <el-form-item label="标签">
                                <el-select v-model="newCard.tags" multiple>
                                    <el-option
                                            v-for="item in ['年卡','次卡','体验卡','VIP卡']"
                                            :key="item"
                                            :label="item"
                                            :value="item">
                                    </el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="内容描述">
                                <el-input
                                        type="textarea"
                                        :rows="4"
                                        v-model="newCard.content">
                                </el-input>
                            </el-form-item>
                        </el-form>
                        <span slot="footer">
            <el-button @click="cardDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="addCard">确认添加</el-button>
        </span>
                    </el-dialog>
                </div>

                <!-- 步骤6：老师信息 -->
                <div v-if="currentStep === 5">
                    <el-form label-width="120px">
                        <el-form-item label="老师列表">
                            <el-select
                                    v-model="selectedTeachers"
                                    multiple
                                    placeholder="请选择老师"
                                    filterable
                                    @change="handleTeacherChange">
                                <el-option
                                        v-for="item in teacherList"
                                        :key="item.id"
                                        :label="item.username"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                            <el-button type="text" @click="teacherDialogVisible = true">+ 新增老师</el-button>
                        </el-form-item>
                    </el-form>

                    <!-- 新增老师弹窗 -->
                    <el-dialog
                            title="新增老师"
                            :visible.sync="teacherDialogVisible"
                            width="600px">
                        <el-form ref="teacherForm" :model="newTeacher" label-width="120px">
                            <el-form-item label="用户ID" prop="userId" required>
                                <el-input
                                        v-model.number="newTeacher.userId"
                                        type="number"
                                        min="1"
                                        placeholder="请输入用户ID">
                                </el-input>
                            </el-form-item>

                            <el-form-item label="用户名" prop="username" required>
                                <el-input
                                        v-model="newTeacher.username"
                                        placeholder="请输入用户名">
                                </el-input>
                            </el-form-item>

                            <el-form-item label="所属场主ID">
                                <el-input
                                        v-model.number="newTeacher.ownerId"
                                        type="number"
                                        :disabled="true"
                                        placeholder="自动关联店主ID">
                                </el-input>
                            </el-form-item>

                            <el-form-item label="等级" required>
                                <el-select
                                        v-model="newTeacher.level"
                                        placeholder="请选择等级">
                                    <el-option label="初级" :value="1"></el-option>
                                    <el-option label="中级" :value="2"></el-option>
                                    <el-option label="高级" :value="3"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                        <span slot="footer">
            <el-button @click="teacherDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="addTeacher">确认添加</el-button>
        </span>
                    </el-dialog>
                </div>


                <!-- 步骤7：完成页面 -->
                <div class="welcome-page" v-if="currentStep === 6">
                    <el-result
                            icon="success"
                            title="开店成功！"
                            subTitle="您的健身房信息已成功提交，请等待系统审核">
                        <template slot="extra">
                            <div class="success-detail">
                                <el-card shadow="never" class="info-card">
                                    <div class="card-content">
                                        <div class="success-item">
                                            <i class="el-icon-office-building"></i>
                                            <span>{{ formData.shop.name }}</span>
                                        </div>
                                        <div class="success-item">
                                            <i class="el-icon-user"></i>
                                            <span>店主：{{ formData.owner.realname }}</span>
                                        </div>
                                        <div class="success-item">
                                            <i class="el-icon-location-outline"></i>
                                            <span>地址：{{ formData.shop.address }}</span>
                                        </div>
                                    </div>
                                </el-card>

                                <div class="action-btns" style="margin-top: 30px">
                                    <el-button
                                            type="primary"
                                            icon="el-icon-house"
                                            @click="currentStep = 0">
                                        返回首页
                                    </el-button>
                                    <el-button
                                            type="success"
                                            icon="el-icon-document"
                                            @click="viewDetails">
                                        查看详情
                                    </el-button>
                                </div>
                            </div>
                        </template>
                    </el-result>
                </div>
            </div>

            <!-- 操作按钮 -->
            <div class="action-btns" v-if="currentStep > 0 && currentStep < 6">
                <el-button @click="prevStep">上一步</el-button>
                <el-button type="primary" @click="nextStep">下一步</el-button>
            </div>
        </div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    // 新增老师相关数据
                    teacherDialogVisible: false,
                    newTeacher: {
                        userId: null,
                        username: '',
                        ownerId: null, // 初始化为null，后续自动关联店主ID
                        level: 1
                    },
                    teachers: [], // 存储所有添加的老师
                    teacherList: [], // 存储所有老师选项
                    selectedTeachers: [], // 存储已选择的老师ID
                    cardDialogVisible: false,
                    newCard: {
                        name: '',
                        validDate: [],
                        originalPrice: 0,
                        sellingPrice: 0,
                        usageLimit: 0,
                        backgroundImage: '',
                        tags: [],
                        content: ''
                    },
                    selectedCard: null,
                    cards: [] ,// 存储所有添加的卡
                    //
                    currentStep: 0,
                    status: '未开店',
                    formData: {
                         owner: {
                                         type: 'owner',
                                         password: '',
                                         nickname: '',
                                         realname: '',
                                         email: '',
                                         phone: '',
                                         idNumber: '',
                                         age: 25,
                                         gender: 'male',
                                         birthday: '',
                                         tags: [],
                                         experience: '',
                                         expertise: '',
                                         workTime: 0, // 改为数值类型
                                         name: '',  
                                         id: '',
                                         level: 1,
                                         status: 'active'
                                     },
                         shop: {
                          name: '',
                          no: '',
                          address: '',
                          limit: 50 // 可以设置默认值
                        },
                         space: {
                                        name: '',
                                        ownerId: '',
                                        ownerName: '',
                                        address: '',
                                        contact: '',
                                        images: []
                                    },
                        card: {
                            name: '',
                            validDate: [],
                            originalPrice: 0,
                            sellingPrice: 0,
                            usageLimit: 0,
                            backgroundImage: '',
                            tags: [],
                            content: ''
                        },
                        teacher: {
                            userId: null,
                            username: '',
                            ownerId: null,
                            level: 1
                        }
                    },
                    cardList: [],
                    teacherList: [],
                    selectedTeachers: [],
                }
            },
            computed: {
                statusText() {
                    return this.status
                },
                statusType() {
                    return {
                        '未开店': 'info',
                        '开店中': 'warning',
                        '开店成功': 'success'
                    }[this.status]
                }
            },
            methods: {
                async init() {
                    getByIdWithStadium(this.shopkeeperId).then(res => {
                        if (String(res.code) === '1') {
                            this.shopDetail = res.data; // 绑定店铺详情数据
                            this.tableData = res.data.stadiums || []; // 绑定场馆数据
                        }
                    })
                },
                // 新增老师方法
                addTeacher() {
                    this.$refs.teacherForm.validate(valid => {
                        if (valid) {
                            const newTeacher = {
                                ...this.newTeacher,
                                id: Date.now(),
                                ownerId: this.formData.owner.id // 自动关联店主ID
                            };
                            this.teachers.push(newTeacher);
                            this.teacherList.push(newTeacher);
                            this.selectedTeachers.push(newTeacher.id);
                            this.resetTeacherForm();
                            this.teacherDialogVisible = false;
                        }
                    });
                },
                resetTeacherForm() {
                    this.newTeacher = {
                        userId: null,
                        username: '',
                        ownerId: this.formData.owner.id, // 自动关联店主ID
                        level: 1
                    }
                },
                handleTeacherChange(selectedIds) {
                    this.formData.teacher.selectedIds = selectedIds;
                    // 自动同步到表单数据
                    const selectedTeacher = this.teachers.find(t => t.id === selectedIds[selectedIds.length - 1]);
                    if (selectedTeacher) {
                        this.formData.teacher = { ...selectedTeacher };
                    }
                },
                // 新增方法
                addCard() {
                    this.$refs.cardForm.validate(valid => {
                        if (valid) {
                            this.cards.push({...this.newCard})
                            this.cardList.push({
                                id: Date.now(),
                                name: this.newCard.name
                            })
                            this.resetCardForm()
                            this.cardDialogVisible = false
                        }
                    })
                },
                resetCardForm() {
                    this.newCard = {
                        name: '',
                        validDate: [],
                        originalPrice: 0,
                        sellingPrice: 0,
                        usageLimit: 0,
                        backgroundImage: '',
                        tags: [],
                        content: ''
                    }
                },
                handleCardSelect(id) {
                    const card = this.cards.find(c => c.id === id)
                    if(card) this.formData.card = {...card}
                },
                // 添加卡片图片上传处理方法
                handleCardUpload(response, file) {
                    this.formData.card.backgroundImage = response.url;
                },
                handleCardRemove() {
                    this.formData.card.backgroundImage = '';
                },
				 // 添加图片上传处理方法
				    handleUploadSuccess(response, file) {
				        this.formData.space.images.push(response.url);
				    },
				    handleRemove(file) {
				        const url = file.response?.url || file.url;
				        this.formData.space.images = this.formData.space.images.filter(
				            img => img !== url
				        );
				    },
                startProcess() {
                    this.status = '开店中'
                    this.currentStep = 1
                },
                nextStep() {
                    if (this.currentStep < 6) {
                        this.currentStep++
                        if (this.currentStep === 6) {
                            this.status = '开店成功'
                        }
                    }
                },
                prevStep() {
                    if (this.currentStep > 0) {
                        this.currentStep--
                    }
                },
                viewDetails() {
                    // 使用店铺ID跳转到详情页
                    window.parent.menuHandle({
                        id: '2',
                        url: 'page/stadium/detail.html?id=' + this.formData.owner.id,
                        name: '店铺详情'
                    }, true);
                },
                async fetchCards() {
                    try {
                        const res = await getCardPage({ page: 1, pageSize: 100 });
                        if (String(res.code) === '1') {
                            this.cardList = res.data.records || [];
                        }
                    } catch (error) {
                        console.error('获取会员卡列表失败', error);
                    }
                },
                async fetchTeachers() {
                    try {
                        const res = await getTeacherPage({ page: 1, pageSize: 100 });
                        if (String(res.code) === '1') {
                            this.teacherList = res.data.records || [];
                        }
                    } catch (error) {
                        console.error('获取老师列表失败', error);
                    }
                },
                handleCardChange(value) {
                    if (value) {
                        const selectedCard = this.cardList.find(card => card.name === value);
                        if (selectedCard) {
                            this.formData.card = { ...selectedCard };
                        }
                    }
                },
                handleTeacherChange(value) {
                    this.formData.teacher.selectedIds = value;
                },
                addNewCard() {
                    window.parent.menuHandle({
                        id: '3',
                        url: 'page/card/add.html',
                        name: '添加会员卡'
                    }, true);
                },
                addNewTeacher() {
                    window.parent.menuHandle({
                        id: '5',
                        url: 'page/teacher/add.html',
                        name: '添加老师'
                    }, true);
                },
            },
            created() {
                this.shopkeeperId = requestUrlParam('id'); // 从URL获取ID
                this.init();
                this.fetchCards();
                this.fetchTeachers();
                // 初始化店主ID
                this.formData.owner.id = Date.now(); // 为店主生成一个唯一ID
                // 默认添加店主为老师
                const ownerAsTeacher = {
                    id: this.formData.owner.id,
                    userId: this.formData.owner.id,
                    username: this.formData.owner.realname,
                    ownerId: this.formData.owner.id,
                    level: 3 // 默认高级
                };
                this.teachers.push(ownerAsTeacher);
                this.teacherList.push(ownerAsTeacher);
                this.selectedTeachers.push(ownerAsTeacher.id);
            }
        })
    </script>
</body>
</html>